<template>
    <main>
		<section class="flex">
			<p class="flex-1 flex-center">{{ message }}</p>
			<ul>
				<li v-if="$route.name === 'Order'">
                    <router-link :to="{ name: 'OrderManager' }">全部订单</router-link>
                </li>
				<li v-else>
                    <router-link :to="{ name: 'Order' }">我的订单</router-link>
                </li>
				<li>
                    <router-link :to="{ name: 'BookManager' }">图书管理</router-link>
                </li>
			</ul>
		</section>
        <Table>
            <template v-slot:thead>
                <th>订单号</th>
                <th>总金额</th>
                <th>订单状态</th>
                <th>下单时间</th>
                <th>操作</th>
            </template>
            <tr v-for="item in page?.data" :key="item.id">
                <th>{{ item.id }}</th>
                <td>{{ item.totalPrice }}</td>
                <td>{{ orderStatus[item.status] }}</td>
                <td>{{ formatDate(item.createTime) }}</td>
                <td>
                    <router-link class="btn-default" :to="{ name: 'OrderDetail', params: { orderId: item.id } }">详情</router-link> 
                    <button class="btn-primary ml-10px" @click="receiverOrder(item.id)">签收</button>
                    <button v-if="$route.name === 'OrderManager'" class="btn-success ml-10px" @click="sendOrder(item)">发货</button>
                    <button class="btn-danger ml-10px" @click="deleteOrder(item.id)">删除</button>
                </td>
            </tr>
        </Table>
        <Pagination :pageNo="page?.pageNo" :pageSize="page?.pageSize"  :totalCount="page?.totalCount"
            :totalPage="page?.total" @pageTurn="pageTurn"></Pagination>
	</main>
</template>

<script>
    import Table from '../../components/Table.vue';
    import Pagination from '../../components/Pagination.vue';
    import orderService from '../../service/OrderService';

    const DEFAULT_PAGE_SIZE = 10;

    /**
     * 我的订单
     */
    export default {
        components: {
            Table, Pagination
        },
        data() {
            return {
                orderStatus: ['未发货', '已发货', '已签收'],    // 订单状态
                message: '',    // 提示信息
                page: null,     // 分页信息
            }
        },
        methods: {
            /**
             * 获取订单数据
             * @param {number} pageNo 页码
             * @param {number} pageSize 页容量
             */
            async getOrderList(pageNo, pageSize) {
                if (this.$route.name === 'Order') {
                    this.page = await orderService.getMyOrder(pageNo, pageSize);
                } else {
                    this.page = await orderService.getOrderList(pageNo, pageSize);
                }
            },
            /**
             * 签收订单
             * @param {Order} order 订单信息
             */
            async receiverOrder(order) {
                const result = await orderService.receiverOrder(order.id);
                if (result.isSuccess) {
                    order.status = result.data;
                }
                this.message = result.message;
            },
            /**
             * 订单发货
             * @param {Order} order 订单信息
             */
            async sendOrder(order) {
                const result = await orderService.sendOrder(order.id);
                if (result.isSuccess) {
                    order.status = result.data;
                }
                this.message = result.message;
            },
            /**
             * 删除订单
             * @param {string} orderId 订单id
             */
            async deleteOrder(orderId) {
                const result = await orderService.deleteOrder(orderId);
                if (result.isSuccess) {
                    this.page.data = this.page.data.filter(item => item.id !== orderId);
                }
                this.message = result.message;
            },
            /**
             * 翻页
             * @param {number} pageNo 页码
             */
            pageTurn(pageNo) {
                this.getOrderList(pageNo, DEFAULT_PAGE_SIZE);
            },
        },
        created() {
            this.getOrderList(1, DEFAULT_PAGE_SIZE);
        },
        watch: {
            '$route.name': function() {
                this.getOrderList(1, DEFAULT_PAGE_SIZE);
                this.message = '';
            }
        }
    }
</script>

<style lang="less" scoped>
    main {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    section {
        p {
            font-weight: bold;
            color: #ff0000;
        }
        ul {
            display: flex;
            justify-content: end;
            padding: 10px 0;
            padding-right: 10px;
        }
        li {
            margin-left: 20px;
        }
    }
</style>
